import React, { Component } from 'react';
import '../../styles/Indexs/Goodcar.scss'
import * as  service from '../../api/index'
import { NavBar, Toast, Stepper, Modal,Empty } from 'antd-mobile'
class Goodcar extends Component {
    constructor(props) {
        super(props)
        this.state = {
            goodcarlist: [],//购物车列表
            token: localStorage.getItem('token'),
            userid: localStorage.getItem('userid'),
            prolist: [],
            visible: false,
            ischeck: true,
            visible2:false
 

        }
    }
    async componentDidMount() {//获取购物车商品列表，下边商列表 
        var res = await service.cart_list({ userid: this.state.userid })
        this.setState({ goodcarlist: res.data.data })

        var res2 = await service.pro_list({ count: Math.floor(Math.random() * 15 + 1) })
        this.setState({ prolist: res2.data.data })
    }
    allmoney() {//总价   
        return this.state.goodcarlist.reduce((prev, item) => {
            return prev += item.num * parseInt( item.originprice)
        }, 0)  
    }
    allcount() {//总个数
        return this.state.goodcarlist.reduce((prev, item) => {
            return prev += item.num
        }, 0)  
    }
    godetail(proid) {//去详情页面
        this.props.history.push({ pathname: '/detail', state: { id: proid } })
        this.props.history.go(0)
    }
    async numchange(value, item) {//商品数量改变
        if (value <= 0) {
            service.cart_remove({ cartid: item.cartid })//发送清除商品请求
            service.cart_updatenum({ cartid: item.cartid, num: value })//发送商品数量更新请求
            var res3 = await service.cart_list({ userid: this.state.userid })//更新购物车列表
            this.setState({ goodcarlist: res3.data.data })
        } else {
            service.cart_updatenum({ cartid: item.cartid, num: value })//发送商品数量更新请求
            var res2 = await service.cart_list({ userid: this.state.userid })//更新购物车列表
            this.setState({ goodcarlist: res2.data.data })
        }
    }
    async Confirm(action, index) {//清空购物车弹框请求
        if (index == 0) {//确认清空
            service.cart_removeall({ userid: this.state.userid })
            var res3 = await service.cart_list({ userid: this.state.userid })//更新购物车列表
            this.setState({ goodcarlist: res3.data.data })
        } else if (index == 1) {//取消按钮

        }
    }
    checkboxChanges(e) {//所有商品状态改变
        console.log(e);
        this.setState({ [e.target.name]: e.target.checked })
        service.cart_selectall({ uesrid: this.state.userid, type: !this.state.ischeck }).then(() => {

            service.cart_list({ userid: this.state.userid }).then((res) => {
                console.log(res)
                this.setState({ goodcarlist: res.data.data })

            })//更新购物车列表

        })

    }
    checkboxChange(item) {//单个商品状态改变
        service.cart_selectone({ cartid: item.cartid, flag: !item.flag }).then((res) => {
            console.log(res)
            service.cart_list({ userid: this.state.userid }).then((res) => {
                console.log(res)
                this.setState({ goodcarlist: res.data.data })
            })//更新购物车列表

        })
    }
    async delcart(item) {//删除单个商品
        var res = await service.cart_remove({ cartid: item.cartid })
        console.log(res)
        if (res.data.code == '200') {
            var res2 = await service.cart_list({ userid: this.state.userid })//更新购物车列表
            this.setState({ goodcarlist: res2.data.data })
            Toast.show({
                content: '商品删除成功!',
                duration: 1000,
            })
        } else {
            Toast.show({
                content: '商品删除失败!',
                duration: 1000,
            })
        }

    }
    async Confirm2(action, index) {//去支付弹框请求
        if (index == 0) {//确认支付
          var res = await service.order_addOrder({userid:this.state.userid})
          this.props.history.push({pathname:'/ConfirmOrder',state:{time:res.data.time}})
        } else if (index == 1) {//取消按钮

        }
    }
  
    render() {
        return (
            <div className='MyGoodCar' >
                <div className='header' >
                    <div className="top">
                        <NavBar onBack={() => {  }}>购物车</NavBar>
                    </div>
                </div>
                { this.state.goodcarlist  &&  this.state.goodcarlist.length != 0 ? 
                     
                    <div className="goodcarmain">
                        <div className="check_delall">
                            <div className="checkbox">
                                {/* <input type="checkbox" name='ischeck' checked={this.state.ischeck} onChange={(e) => { this.checkboxChanges(e) }} />全选 */}
                            </div>
                            <span onClick={() => { this.setState({ visible: true }) }} >清空购物车</span>
                            <Modal
                                title='是否清空购物车'
                                visible={this.state.visible}//控制弹出层显示隐藏
                                content={//自定义弹出层内容
                                    <>
                                        <p>确认清空？</p>
                                    </>
                                }
                                closeOnAction={true}//点击操作按钮是否关闭弹出层
                                closeOnMaskClick={true}
                                onClose={() => {//点击按钮的回调函数   
                                    console.log()
                                    this.setState({ visible: false })
                                }}
                                onAction={(action, index) => { this.Confirm(action, index) }}
                                actions={[//按钮的文字
                                    {
                                        key: '0',
                                        text: '确认',
                                        primary: true,
                                    },
                                    {
                                        key: '1',
                                        text: '取消',
                                    },

                                ]}
                            />
                        </div>
                        <div className="MyGoodCar_middle">
                            {
                                this.state.goodcarlist && this.state.goodcarlist.map((item, index) => {
                                    return (
                                        <div className="goodcar" key={index}    >
                                            <input type="checkbox" checked={item.flag} onChange={() => { this.checkboxChange(item) }} />
                                            <div className="img">
                                                <img src={item.img1} alt="" />
                                            </div>
                                            <div className="right">
                                                <div className='name'>{item.proname}</div>
                                                <div>
                                                    <span className='baoyou' >
                                                        包邮包税
                                                    </span>
                                                </div>
                                                <div >
                                                    <span className="manjian">
                                                        满1000减50
                                                    </span>
                                                </div>
                                                <div className="money">
                                                    <p className='number' >￥{parseInt(item.originprice)}</p>
                                                    <div className="button">
                                                        <Stepper inputReadOnly={true} value={item.num} onChange={(value) => { this.numchange(value, item) }} />
                                                    </div>
                                                </div>
                                                <div className="del" onClick={() => { this.delcart(item) }} >
                                                    删除该商品
                                                </div>
                                            </div>
                                        </div>
                                    )
                                })
                            }
                        </div>
                    </div>
                    :
                    <div className="nothing"> 
                        <Empty description='你的购物车好像没有东西'
                           style={{ padding: '64px 0' ,backgroundColor:'white'}}
                           imageStyle={{ width: 128 }}
                           />
                     </div>
                    //购物车车列表为空显示的页面          
                } 
                <div className="prolist">
                    {
                        this.state.prolist.map((item, index) => {
                            return (
                                <div className="item" key={index} onClick={() => { this.godetail(item.proid) }} >
                                    <div className="img">
                                        <img src={item.img1} alt="" />
                                    </div>
                                    <div className="text">
                                        <p>{item.proname}</p>
                                        <span>￥{item.originprice}</span>
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
                { this.state.goodcarlist  &&  this.state.goodcarlist.length != 0 ? 
                    <div className="MyGoodCar_bottom">
                        <div className="left">
                            <input type="checkbox" name='ischeck' checked={this.state.ischeck} onChange={(e) => { this.checkboxChanges(e) }} />
                            <p>全选</p>
                        </div>
                        <div className="right">
                            <p>总价</p>
                            <span>￥{this.allmoney()}</span>
                            <div className="go"  onClick={()=>{this.setState({visible2:!this.state.visible2})}} >
                                去结算({this.allcount()})
                                
                            </div>                         
                        </div>
                        <Modal
                                title='去支付？'
                                visible={this.state.visible2}//控制弹出层显示隐藏
                                closeOnAction={true}//点击操作按钮是否关闭弹出层
                                closeOnMaskClick={true}
                                onClose={() => {//点击按钮的回调函数   
                                    console.log()
                                    this.setState({ visible2: false })
                                }}
                                onAction={(action, index) => { this.Confirm2(action, index) }}
                                actions={[//按钮的文字
                                    {
                                        key: '0',
                                        text: '确认',
                                        primary: true,
                                    },
                                    {
                                        key: '1',
                                        text: '取消',
                                    },

                                ]}
                            />
                    </div>
                    :
                    ''
                }
              

            </div>
        );
    }
}


export default Goodcar;